<template>
    <div class="tzgg-wrapper">
        <hg-tab @change="change" :list="tabs" class="tzgg-tabs" direction="vertical"></hg-tab>
        <component class="door-wrapper" :is="active"></component>
        <div class="clear-float"></div>
    </div>
</template>

<script>
import hygg from './hygg.vue'
import nbtz from './nbtz.vue'
import hgTab from '../../common/hgTab.vue'

export default {
    name: 'tzgg',
    data: function() {	
        return {
            tabs:[
                {
                    label: '行业公告',
                    value: 'hygg'
                },
                {
                    label: '内部通知',
                    value: 'nbtz'
                },
            ],
            active: 'hygg'
        }
    },
    components: {
        hygg,
        hgTab,
        nbtz
    },
    methods: {
        change(val){
            this.active = val
        }
    }
}
</script>

<style lang="scss">
.tzgg-wrapper{
    min-height: 200px;
    .tzgg-tabs{
        width: 200px;
        margin: 35px 0 0 0;
        float: left;
    }
    .door-wrapper{
        margin-top: 20px;
        width: 1000px;
        float: right;
    }
}
</style>